<template>
  <div class="mdetail">
    <div class="profile">
      <div class="top">
        <figure class="avatar" :style="{backgroundImage: 'url('+ hasdomain(mdetail.userPhoto) +')'}">
          <img v-if="false" :src="mdetail.userPhoto | hasdomain">
        </figure>
      </div>
      <h2 class="mname">{{mdetail.name || '加载中...'}}</h2>
      <ul class="ensure">
        <li v-if="mdetail.teamwork"><img src="@/assets/mdetail/icon-queren@2x.png">独家合作</li>
        <li><img src="@/assets/mdetail/icon-blue@2x.png">平台认证</li>
        <li><img src="@/assets/mdetail/icon-yellow@2x.png">交易担保</li>
      </ul>
      <ul class="status">
        <li class="vux-1px-r">
          <p class="title">解答数</p>
          <p class="num">{{mdetail.explain || 0}}</p>
        </li>
        <li class="vux-1px-r">
          <p class="title">粉丝数</p>
          <p class="num">{{mdetail.fans || 0}}</p>
        </li>
        <li>
          <p class="title">平均回复</p>
          <p class="num">{{mdetail.replytime || 0}}分钟</p>
        </li>
      </ul>
    </div>
    
    <div class="column-box">
      <h3 class="column-bar">
        <p class="title">从业年限<span class="year">{{mdetail.year || 0}}年</span></p>
      </h3>
    </div>

    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title">擅长领域</p>
      </h3>
      <ul class="labels">
        <li class="primary" v-for="(v, i) in mdetail.domain" :key="'label' + i">{{v}}</li>
      </ul>
    </div>

    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title">标签</p>
      </h3>
      <ul class="labels">
        <li class="t1" v-for="(v, i) in mdetail.tag" :key="'tag' + i">{{v}}</li>
      </ul>
    </div>

    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title">大师简介</p>
      </h3>
      <div class="dec" v-html="mdetail.content || '无'"></div>
    </div>

    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title sub">从业经验</p>
      </h3>
      <div class="dec" v-html="mdetail.experience || '无'"></div>
    </div>
    
    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title sub">学习经历</p>
      </h3>
      <ul class="study">
        <li v-for="(v, i) in mdetail.study" :key="'study' + i" v-if="i % 2 == 0">
          <p><mark></mark>{{v}}</p>
          <p>{{mdetail.study[i+1]}}</p>
        </li>
      </ul>
    </div>

    <div class="column-box">
      <h3 class="column-bar">
        <p class="title sub">{{mdetail.title || '无'}}</p>
      </h3>
    </div>

    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title sub">服务案例</p>
      </h3>
      <div class="serv">
        <p>{{mdetail.service}}</p>
        <!-- <p>服务案例数 截止到目前，服务过的用户超过 {{10000}} 名</p> -->
        <!-- <p>服务合作过的企业项目</p>
        <ul>
          <li v-for="(v, i) in mdetail.service" :key="'ser' + i">{{v}}</li>
        </ul> -->
      </div>
    </div>

    <div class="column-box">
      <h3 class="column-bar vux-1px-b">
        <p class="title">评价反馈</p>
      </h3>
      <ul class="feedbacks" v-if="feedbacks.length">
        <li :class="{'vux-1px-b': i != feedbacks.length - 1}" v-for="(v, i) in feedbacks" :key="'fb' + i">
          <div class="infor">
            <figure class="avatar">
              <img :src="v.userPhoto | hasdomain">
            </figure>
            <div class="mation">
              <p>{{v.userName || "匿名用户"}}</p>
              <time>{{v.createTime}}</time>
            </div>
          </div>
          <ul class="labels" v-if="v.tag && v.tag.length">
            <li class="grey" v-for="(t, n) in v.tag.split(',')" :key="'t' + n" v-if="t">{{t}}</li>
          </ul>
          <p class="dec">{{v.userContent}}</p>
          <div class="reply" v-if="v.masterReply">
            <p><span>{{v.masterName}}</span>回复：{{v.masterReply}}</p>
          </div>
        </li>
        <div class="more" @click="toLoad" ref="more">加载更多</div>
      </ul>
      <s404 v-else title="没有相关评论哦，快去追加评价吧"></s404>
    </div>

    <footer class="actions vux-1px-t">
      <div class="reward" @click="reward">
        <figure></figure>
        <p>打赏</p>
      </div>
      <div class="atten" @click="fav">
        <figure :class="[attened + '']"></figure>
        <p>{{attened ? '已' : ''}}关注</p>
      </div>
      <div class="order red" @click="kaidanShow = true" v-if="online0">开单提醒（今日订单已满）</div>
      <div class="order" @click="getService" v-else>立即下单</div>
    </footer>

    <div v-transfer-dom>
      <confirm v-model="kaidanShow" @on-confirm="setKaidan" title="设置开单提醒">
        <p class="tips">确定设置开单提醒后，若该大师在24小时内设置开单，系统将会通知您</p>
      </confirm>
    </div>

    <div v-transfer-dom>
      <popup v-model="serviceShow">
        <div class="services">
          <div class="title vux-1px-b">请选择服务项目</div>
          <div class="list">
            <ul>
              <li class="vux-1px-b" v-for="(v, i) in serviceData" :key="'serv' + i" @click="serviceItem = v" :class="{active: serviceItem.id == v.id}">
                <span>{{v.serviceName}}</span>
                <span>￥{{v.price}}</span>
              </li>
            </ul>
          </div>
          <div class="p20 vux-1px-t">
            <x-button type="primary" :disabled="!serviceItem.id" @click.native="selectService">确定</x-button>
          </div>
        </div>
      </popup>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="reasonShow" hide-on-blur :dialog-style="{'max-width': '66.66%'}" class="why-cancel">
        <p class="title">取消关注原因</p>
        <figure class="pic">
          <img src="@/assets/mdetail/cancel@2x.png">
        </figure>
        <ul class="reason-ul">
          <li v-for="(v, i) in reasons" :key="'reason' + i" :class="{active: reasonIndex == i}" @click="reasonIndex = i">{{v}}</li>
        </ul>
        <div class="reason-btn vux-1px-t">
          <div class="vux-1px-r" @click="reasonShow = false">取消</div>
          <div class="sure" @click="cancelFav">确定</div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import s404 from "@/views/status/404";

export default {
  components: {
    s404,
  },
  data() {
    return {
      mdetail: {},
      attened: false,
      offline: false,
      kaidanShow: false,
      serviceData: [],
      serviceShow: false,
      serviceItem: {},
      reasons: ['测算准度', '回复速度', '大师颜值'],
      reasonIndex: 0,
      reasonShow: false,
      feedbacks: [],
      offset: 0,
      limit: 5,
    }
  },
  computed: {
    uid() {
      return this.$store.state.userId;
    },
    mid() {
      return this.$route.query.id;
    },
    online0() {
      return this.mdetail.openOnlineService == 0;
    },
  },
  methods: {
    parseHtml(html) {
      var div = document.createElement('div');
      div.innerHTML = html;
      return div.innerText || div.textContent;
    },
    getDetail() {
      this.$http.fetchGet('getmasterdetail', {
        id: this.mid
      }).then(({data}) => {
        console.log('大师详情', data);
        data.domain = data.domain.split(',');
        data.tag = data.tag.split(',');
        data.content = this.parseHtml(data.content);
        data.study = data.study.split('\n');
        // data.service = data.service.split(',');
        this.mdetail = data;
      })
    },
    getService() {
      this.$http.fetchGet('getMasterProvideService', {
        masterId: this.mid
      }).then(({data = []}) => {
        console.log('可选服务', data);
        this.serviceData = data;
        this.serviceShow = true;
      })
    },
    selectService() {
      this.serviceShow = false;
      if(!this.isLogin()) return;
      if(this.$store.state.isMaster) return this.$vux.toast.text("暂不支持老师下单");
      if(!this.$store.state.userPhone) return this.$store.commit('showPhone', true);
      this.$http.fetchGet('saveServiceOrder', {
        userId: this.uid,
        masterId: this.mid,
        masterserviceId: this.serviceItem.id,
        baziId: 1,
      }).then(({data}) => {
        console.log('下单', data);
        data && this.pay1(data);
      })
    },
    pay1(data) {
      this.$vux.toast.text('下单成功');
      setTimeout(() => {
        this.$router.push({
          name: 'pay',
          query: {
            step: 1,
            id: data.orderId,
          }
        })
      }, 2000);
    },
    setKaidan() {
      this.$http.fetchGet('masterBusyReminder', {
        userId: this.uid,
        masterId: this.mid,
      }).then(({data}) => {
        console.log('设置开单', data);
        data == 'OK' && this.$vux.toast.text("设置成功！！！");
      });
    },
    makeFav() {
      this.$http.fetchGet('makefavorite', {
        favoriteType: 2,
        id: this.mid,
        userId: this.uid,
      }).then(({ data }) => {
        console.log('添加关注', data);
        if(data && data.join() == 'ok') {
          this.$vux.toast.text("关注成功！");
          this.attened = true;
        }
      })
    },
    cancelFav() {
      this.$http.fetchGet('cancelFavorite', {
        favoriteType: 2,
        id: [this.mid].join(','),
        userId: this.uid,
        whycancel: this.reasons[this.reasonIndex],
      }).then(({data = {}}) => {
        console.log('取消关注', data);
        if(data.status == 1) {
          this.$vux.toast.text("取消成功！");
          this.attened = false;
          this.reasonShow = false;
        }
      })
    },
    isFav() {
      this.$http.fetchGet('isFavorited', {
        favoriteType: 2,
        id: this.mid,
        userId: this.uid,
      }).then(({data = {}}) => {
        console.log('是否关注', data);
        this.attened = !!(data.isFavorited * 1);
        console.log(this.attened)
      })
    },
    fav() {
      if(!this.isLogin()) return;
      if(this.attened) {
        this.reasonShow = true;
      } else {
        this.makeFav();
      }
    },
    reward() {
      if(!this.isLogin()) return;
      this.$router.push({
        path: '/payfor',
        query: {
          id: this.mid,
        }
      });
    },
    isLogin() {
      if(this.uid) {
        return true;
      } else {
        this.$vux.toast.text("请先登录");
        setTimeout(() => {
          this.$router.push({
            path: '/login',
            query: {
              redirect: this.$route.fullPath
            }
          });
        }, 2000)
      }
    },
    getFeedback() {
      this.$http.fetchGet('getFeedback', {
        id: this.mid,
        offset: this.offset,
        limit: this.limit,
        feedbackType: 1,
      }).then(({data = []}) => {
        console.log('评价反馈', data);
        if(this.offset == 0) {
          this.feedbacks = data;
        }
        else this.feedbacks.push(...data);
        if(data.length == 0) {
          this.offset -= this.limit;
          console.log(this.$refs.more)
          this.$refs.more.style.display = 'none'
        }
      })
    },
    toLoad() {
      this.offset += this.limit;
      this.getFeedback()
    }
  },
  created() {
    if(this.uid) this.isFav();
    this.getDetail();
    this.getFeedback();
  },
}
</script>

<style lang="less">
.mdetail .dec img{
  display: block;
  width: 100%;
}
</style>

<style scoped lang="less">
.mdetail{
  background-image: url('../../assets/mdetail/backgroud@2x.png');
  background-repeat: no-repeat;
  background-size: 100%;
  .pt(170);
  .pb(108);
	.profile{
    .m(20);
    .bri(10);
    box-shadow: 0 8px 27px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    position: relative;
    .top{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      .p(7);
      background-color: rgba(255,255,255, 0.2);
      border-radius: 50%;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
      .avatar{
        .w(170);
        .h(170);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 50%;
      }
    }
    .mname{
      .pt(130);
      .f30;
      .lh(50);
      text-align: center;
    }
    .ensure{
      display: flex;
      line-height: 3;
      .f26;
      li{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          .w(24);
          .h(24);
          .mr(10);
        }
      }
    }
    .status{
      .pt(50);
      .pb(62);
      .h(50);
      display: flex;
      li{
        flex: 1;
        text-align: center;
        .title{
          .f22;
          transform: translateY(-0.5em);
        }
        .num{
          .f30;
          transform: translateY(0.5em);
          font-weight: bold;
        }
      }
    }
  }
  .year{
    .f24;
    color: #666666;
    margin-left: 2.2em;
  }
  .labels{
    display: flex;
    flex-wrap: wrap;
    .p(13);
    li{
      .f20;
      .m(13);
      .padd(9, 12);
      .bri(10);
      color: white;
      border: 1px solid transparent;
      &.primary{
        color: @primary;
        border: 1px solid @primary;
      }
      &.grey{
        color: #666;
        border-color: #999;
      }
      &.t1{
        background-color: #ff607a;
      }
      &.t2{
        background-color: #fead58;
      }
      &.t3{
        background-color: #59d3ac;
      }
      &.t4{
        background-color: #37c5e2;
      }
      &.t5{
        background-color: #9dc3e6;
      }
    }
  }
  .dec{
    .padd(18, 20);
    .f24;
    line-height: 1.6;
    img{
      display: block;
      width: 100%;
      .mb(20);
    }
  }
  .study{
    .p(40);
    li{
      position: relative;
      p{
        .pl(40);
        border-left: 2px solid @primary;
        &:first-child{
          .f22;
        }
        &:last-child{
          .f20;
          .pt(16);
          .pb(36);
          line-height: 1.5;
        }
        mark{
          position: absolute;
          left: 0;
          top: 2px;
          .w(18);
          .h(18);
          transform: translateX(-50%);
          margin-left: 1px;
          background-color: @primary;
          border-radius: 50%;
        }
      }
      &:first-child p mark:before{
        content: '';
        position: absolute;
        left: 0;
        top: -2px;
        .w(18);
        height: 2px;
        background-color: #ffffff;
      }
      &:last-child p mark:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -3px;
        .w(18);
        height: 3px;
        background-color: #ffffff;
      }
      &:last-child p:last-child{
        padding-bottom: 0;
        border-left-color: transparent;
      }
    }
  }
  .serv{
    .padd(10, 20);
    .f24;
    line-height: 3;
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        position: relative;
        .pl(24);
        .pr(42);
        &:before{
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          border: 1px solid #666666;
          border-radius: 50%;
          .p(6);
        }
      }
    }
  }
  .feedbacks{
		.pl(20);
		.pr(20);
		background-color: #fff;
		> li{
			.pt(30);
			.pb(24);
			.infor{
				display: flex;
				align-items: flex-start;
				.avatar{
					img{
						display: block;
						.h(60);
					}
				}
				.mation{
					.pl(16);
					flex: 1;
					line-height: 1;
					p{
						.f30;
						.mb(18);
					}
					time{
						.f20;
						color: #999;
					}
				}
      }
      .labels{
        .ml(76);
        padding: 0;
        padding-top: .066667rem;
        li{
          margin: 0;
          margin-top: .266667rem;
          margin-right: .266667rem;
        }
      }
			.dec{
        .ml(56);
				.pt(20);
				.f26;
				.lh(40);
				// .px2rem(max-height, 119);
				overflow: hidden;
      }
      .reply{
        .mt(20);
        .ml(76);
        .p(20);
				.f26;
				.lh(40);
        border: 1px solid @primary;
        border-radius: .133333rem;
        background-color: fadeout(@primary, 95%);
        position: relative;
        &:before{
          content: '';
          position: absolute;
          left: 0;
          top: -1px;
          width: .4rem;
          height: .4rem;
          border-top: 1px solid @primary;
          border-left: 1px solid @primary;
          transform: translate(100%, -50%) rotate(45deg);
          background-color: #f3fafe;
        }
      }
    }
    .more{
      .lh(60);
      text-align: center;
      color: @primary;
    }
	}
	.s404{
		.pt(100);
		.pb(100);
	}
}
.actions{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .h(108);
  display: flex;
  background-color: #ffffff;
  .reward,
  .atten{
    flex: 131;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    figure{
      .w(40);
      .h(40);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    p{
      .mt(14);
      .f22;
    }
  }
  .reward figure{
    background-image: url('../../assets/mdetail/icon-dashang@2x.png');
  }
  .atten figure{
    &.true{
      background-image: url('../../assets/mdetail/heart@2x.png');
    }
    &.false{
      background-image: url('../../assets/mdetail/icon-guanzhu@2x.png');
    }
  }
  .order{
    .f30;
    flex: 488;
    color: #ffffff;
    background-color: @primary;
    display: flex;
    align-items: center;
    justify-content: center;
    &.red{
      background-color: #E73828;
    }
    &.grey{
      background-color: #999999;
    }
  }
}
.services{
  background-color: #ffffff;
  .title{
    .f30;
    .lh(95);
    text-align: center;
  }
  .list{
    .pl(20);
    .pr(20);
    .px2rem(max-height, 84 * 5);
    overflow-y: auto;
    li{
      .h(84);
      .f28;
      color: #666666;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.active{
        color: @primary;
      }
    }
  }
  .p20{
    .p(20);
  }
}
.why-cancel{
  .title{
    .pt(20);
    .f30;
    line-height: 3;
    text-align: center;
  }
  .pic{
    img{
      display: block;
      margin: 0 auto;
      .w(120);
    }
  }
  .reason-ul{
    .f24;
    .p(20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    li{
      line-height: 3;
      padding-left: 1.5em;
      background: url('../../assets/mdetail/icon-blue-hui@2x.png') no-repeat;
      background-position: left 0.2em center;
      background-size: auto 1em;
      &.active{
        background-image: url('../../assets/mdetail/icon-blue@2x.png');
      }
    }
  }
  .reason-btn{
    .f28;
    display: flex;
    text-align: center;
    div{
      flex: 1;
      line-height: 3;
      &.sure{
        color: @primary;
      }
    }
  }
}
.vux-confirm{
  .tips{
    padding-top: .5em;
    padding-bottom: 1em;
    .f28;
    text-align: left;
  }
}
</style>
